<template>
  <div>
    <div style="margin-bottom: 30px" v-for="i in 8" :key="i">
      <el-row :gutter="10">
        <el-col :span="4">
          <el-avatar shape="square" src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg">
          </el-avatar>
        </el-col>
        <el-col :span="12" style="text-align:left">
          <p style="font-size: 15px;">店铺名称</p>
          <p>2019-10-22 11：03</p>
        </el-col>
        <el-col :span="8" style="text-align: right">
          <p>已取消</p>
          <p>您主动取消</p>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12" :offset="4"><p>菜……等10件商品</p></el-col>
        <el-col :span="8" style="text-align: right"><p>￥ 28.8</p></el-col>
      </el-row>
      <el-row :gutter="15" style="margin-top:20px">
        <el-col :span="6" :offset="7">
          <el-button size="small">删除订单</el-button>
        </el-col>
        <el-col :span="6">
          <el-button size="small">再来一单</el-button>
        </el-col>
        <el-col :span="3">
          <el-button size="small" @click="jump('/evaluation')">评价</el-button>
        </el-col>
      </el-row>
      <el-divider></el-divider>
    </div>
  </div>
</template>

<script>
    export default {
        name: "HistoryOrder",
        data(){
            return{

            }
        },
        methods:{
            jump(route){
                this.$router.push(route);
            }
        }
    }
</script>

<style scoped>
  p {
    margin: 0;
    font-size: 13px;
  }
</style>
